import React,{useState,useEffect} from 'react'
import { NavBar, Toast } from '@nutui/nutui-react'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import { Input, Button } from '@nutui/nutui-react'
import { Tips } from '@nutui/icons-react'
import axios from 'axios'
import { Navigate, useNavigate } from 'react-router-dom'

export default function Login() {
  let Navigate = useNavigate()
  // 登录成功后跳转的页面
  let path='/lwl_home'

  // 手机号
  let [phoneNum,setPhoneNum] = useState('')
  // 验证码
  let [code,setCode] = useState('')
  // 获取验证码返回的数据
  let [data,setData] = useState({})
  // 节流
  let [flag,setFlag]=useState(false)
  // 获取验证码按钮的文本
  let [text,setText]=useState('获取验证码')
  // 获取验证码
  let getsms = async()=>{
    let {data}=await axios.post('http://127.0.0.1:3000/lxj/get_sms',{
      phoneNum
    })
    console.log(data)
    if(data.code===200){
      setData(data)
      // 节流函数
      let time=60
      setFlag(true)
      setText(time+'s后重新获取验证码')
      let jieliu=setInterval(()=>{
        time--
        setText(time+'s后重新获取验证码')
        if(time===0){
          clearInterval(jieliu)
          setFlag(false)
          setText('获取验证码')
        }
      },1000)
    }else{
      Toast.show(data.msg)
    }
  }
  // 登录函数
  let login=async()=>{
    if(code===data.sms){
      let {data}=await axios.post('http://127.0.0.1:3000/lxj/lxj_login',{
        phoneNum
      })
      localStorage.setItem('refreshToken',data.refreshToken)
      localStorage.setItem('accessToken',data.accessToken)
      console.log(data)
      localStorage.setItem('_id',data.data._id)
      // 页面跳转
      // Navigate(path)
      
    }else if(phoneNum===''){
      Toast.show('请输入手机号')
    }else{
      Toast.show('验证码错误')
    }
  }
  useEffect(()=>{
    if(localStorage.getItem('refreshToken')){
      axios.post("http://127.0.0.1:3000/lxj/refresh",{
        refreshToken:localStorage.getItem('refreshToken')
      }).then(res=>{
        console.log(res.data)
        if(res.data.code===200){
          Navigate(path)
          console.log(localStorage.getItem('refreshToken')===res.data.refreshToken)
          localStorage.setItem('accessToken',res.data.accessToken)
          localStorage.setItem('refreshToken',res.data.refreshToken)
          Toast.show('token刷新成功')
        }else{
          localStorage.removeItem('accessToken')
          localStorage.removeItem('refreshToken')
          Toast.show(res.data.msg)
        }
      })
    }
  },[])
  // 测试用 登陆函数
  // let login=async()=>{
  //     let {data}=await axios.post('http://127.0.0.1:3000/login',{
  //       phoneNum
  //     })
  //     localStorage.setItem('refreshToken',data.refreshToken)
  //     localStorage.setItem('accessToken',data.accessToken)
  // }
  return (
    <div 
    >
        <NavBar
        style={{
          // 设置为透明色
          backgroundColor: 'transparent',
        }}
        back={
          <>
            <ArrowLeft />
            返回
          </>
        }
        onBackClick={(e) => Toast.show('返回')}
      >
      </NavBar>
      <div
        style={{
          padding:'0 10vw'
        }}
      >
        <h2 style={{
          margin:'3vh 0 3vh 0',
        }}>手机快捷登录</h2>
        <span
          style={{
            color: '#999',
            fontSize: '13px',
            margin: '3vh 0 3vh 0',
          }}
        >未注册过的手机号码将自动创建账号</span>
        <br></br>
        <br></br>
        <br></br>
        <Input placeholder="请输入手机号" onChange={(e)=>setPhoneNum(e)} />
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            background: '#fff',
            padding: '0 10px',
          }}
        >
          <Tips color="var(--nutui-gray-7)" />
          <Input
            onChange={(e)=>setCode(e)}
            placeholder="请输入短信验证码"
            style={{ 
              '--nutui-input-padding': '10px' ,
              margin:'1vh 0',
            }}
          />
          <div className="right">
            <Button 
            disabled={flag}
            onClick={()=>getsms()}
            type="default" size="small" shape='square' 
            style={{
              // 圆角属性
              borderRadius: '5px',
            }} >
              {text}
            </Button>
          </div>
        </div>
        <p style={{
          display:'block',
          margin:'3vh 0'
        }}>

        </p>
        <span 
        style={{
          display:'none',
          color:'red',
          fontSize:'13px'}}>
          验证码错误
        </span>
        <span 
        style={{
          fontSize:'13px',
          color:'#139',
        }} 
        onClick={()=>Navigate('/register')}
        >没有账号?注册一个</span>
        <Button 
          onClick={login}
          type="warning" 
          shape="square" 
          style={{
            
            margin:'3vh auto',
            width:'80vw',
            borderRadius: '8px',
            height: '40px',
          }} 
        >
          <span 
          style={{
            color:"fff",
            border:'none',
          }}>
            登录
          </span>
        </Button>
      </div>
      <div style={{
        position: 'absolute',
        bottom: '10vh',
        textAlign:'center',
        // 子元素居中
        display: 'flex',
        justifyContent: 'center',
        width: '100vw',

      }}>
        <div>
          <span>其他登录方式</span>
          <br></br>
          <img src='https://upload.shejihz.com/wp-content/uploads/cx_img/130/2202a72910c65d653f7cb56f86caf0d0-560x360-2-0.jpg' style={{width:'10vw',margin:10}} alt=''></img>
          <img src='https://ts1.cn.mm.bing.net/th/id/R-C.051a13a362f5fd28220ff08d1a6ad1af?rik=5C%2b1EQVzUdSvVA&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2020%2f06-13%2f85282%2fwater_85282_698_698_.png&ehk=rU4W72eeMZdIMJIlApR86mQp5vQidsmGmBlmAK9s3R8%3d&risl=&pid=ImgRaw&r=0' style={{width:'10vw',margin:10}} alt=''></img>
          <img src='https://img.51miz.com/Element/00/56/61/33/813bf49e_E566133_b23e74ba.png' style={{width:'10vw',margin:10}} alt=''></img>
        </div>
      </div>
    </div>
  )
}
